<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<link rel="stylesheet" href="//qn.uwitkey.com/assets/fontawesome6.2.0/css/all.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
		<style>
			/* 右侧小图标hover */
			.right-fixed:hover {
				background-color: #df0024;
			}

			.right-fixed {
				transition: all 0.5s linear;
				background-color: white;
				padding: 0.5rem 0.375rem;
				cursor: pointer;
				border-radius: 7px;
				border: 2px solid#bca873;
			}

			.right-fixed i {
				font-size: 26px;
				/* background          : white; */
				background: linear-gradient(270deg, #fbc673 0%, #9e7a45 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.right-fixed:hover i {
				font-size: 26px;
				background: linear-gradient(270deg, #fff 0%, #fff 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.right-fixed p {
				color: #666;
				font-size: 12px !important;
				font-weight: 400;
			}

			.right-fixed:hover p {
				color: #fff;
			}

			/* 鼠标移动显示电话号码 */
			.backtoTOP-left {
				transform: translate3d(0, 0, 0);
				visibility: hidden;
				opacity: 0;
				transition: 0.35s all cubic-bezier(0.65, 0.05, 0.36, 1);
			}
			.right-fixed:hover .backtoTOP-left {
				visibility: visible;
				opacity: 1;
			}
			.bott-fixed:hover .backtoTOP-left {
				visibility: visible;
				opacity: 1;
			}
		</style>
	</head>
	<body>
		<!-- ********** 右侧固定栏 ********** -->
		<div class="position-fixed d-none d-sm-block" style="top: 50%; right: 0; z-index: 1021">
			<div class="text-center right-fixed position-relative">
				<i class="fab fa-weixin img-fluid d-inline-block"></i>
				<p class="mb-0">微信沟通</p>
				<div class="position-absolute bg-danger backtoTOP-left p-0 w-6r p-1" style="top: -30%; right: 120%">
					<div class="position-absolute" style="border: 5px solid transparent; border-left-color: #df0024; top: 45%; right: -10%"></div>
					<img src="https://qn1.10soo.net/assets22/202208081508123.png" alt="" class="d-block w-100" />
				</div>
			</div>
			<div class="text-center right-fixed position-relative">
				<i class="fa-brands fa-tiktok img-fluid d-inline-block"></i>
				<p class="mb-0">抖音沟通</p>
				<div class="position-absolute bg-danger backtoTOP-left p-0 w-6r p-1" style="top: -30%; right: 120%">
					<div class="position-absolute" style="border: 5px solid transparent; border-left-color: #df0024; top: 45%; right: -10%"></div>
					<img src="https://qn1.10soo.net/assets22/202208081508123.png" alt="" class="d-block w-100" />
				</div>
			</div>
			<div class="text-center right-fixed position-relative">
				<i class="fas fa-phone-alt img-fluid d-inline-block"></i>
				<p class="mb-0">电话咨询</p>
				<div class="position-absolute bg-danger backtoTOP-left w-8r text-center" style="top: 20%; right: 112%">
					<div class="position-absolute" style="border: 5px solid transparent; border-left-color: #df0024; top: 38%; right: -8%"></div>
					<a class="d-block p-1 text-white text-decoration-none" href="tel:13722288210" target="_blank">13722288210</a>
					<a class="d-block p-1 text-white text-decoration-none" href="tel:13733399898" target="_blank">13733399898</a>
				</div>
			</div>
			<div id="backTop" class="text-center right-fixed" style="opacity: 0">
				<div style="overflow: hidden">
					<i class="fas fa-arrow-alt-to-top img-fluid d-inline-block"></i>
				</div>
				<p class="mb-0">返回顶部</p>
			</div>
		</div>

		<div style="height: 2000px"></div>
	</body>

	<script>
		// 获取节点
		// let backTop = document.querySelector('#backTop')
		// 页面滚动窗口监听事件
		window.onscroll = function () {
			// 获取浏览器卷去的高度
			let high = document.documentElement.scrollTop || document.body.scrollTop;
			//当前屏幕可见区域大小
			let clhigh = document.body.clientHeight;

			if (high >= 400) {
				$('#backTop').css('opacity', '100%');
			} else {
				$('#backTop').css('opacity', '0%');
			}
		};
		$('#backTop').click(function () {
			console.log('回到顶部');
			$('html,body').animate(
				{
					scrollTop: 0,
				},
				50,
			);
		});
	</script>
</html>
